<script setup lang="ts">
import { 
  DataLine, 
  User, 
  Goods, 
  Document
} from '@element-plus/icons-vue'

const statCards = [
  {
    icon: 'User',
    value: '1,234',
    label: '用户数量'
  },
  {
    icon: 'Goods',
    value: '564',
    label: '商品数量'
  },
  {
    icon: 'Document',
    value: '856',
    label: '订单数量'
  },
  {
    icon: 'DataLine',
    value: '¥9,280',
    label: '总销售额'
  }
]

const tableData = [
  {
    date: '2023-09-10',
    name: '用户001',
    address: '北京市朝阳区',
  },
  {
    date: '2023-09-09',
    name: '用户002',
    address: '上海市浦东新区',
  },
  {
    date: '2023-09-08',
    name: '用户003',
    address: '广州市天河区',
  },
  {
    date: '2023-09-07',
    name: '用户004',
    address: '深圳市南山区',
  },
]

const activities = [
  {
    content: '系统更新完成',
    timestamp: '2023-09-10',
    type: 'success',
  },
  {
    content: '新增用户权限功能',
    timestamp: '2023-09-09',
    type: 'primary',
  },
  {
    content: '数据库维护',
    timestamp: '2023-09-08',
    type: 'warning',
  },
  {
    content: '系统安全升级',
    timestamp: '2023-09-07',
    type: 'danger',
  },
]
</script>

<template>
  <div class="main-content">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>欢迎使用后台管理系统</h3>
            </div>
          </template>
          <div class="card-content">
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, index) in statCards" :key="index">
                <el-card shadow="hover" class="stat-card">
                  <el-row>
                    <el-col :span="8" class="stat-icon">
                      <el-icon :size="40">
                        <component :is="item.icon"></component>
                      </el-icon>
                    </el-col>
                    <el-col :span="16" class="stat-info">
                      <div class="stat-value">{{ item.value }}</div>
                      <div class="stat-label">{{ item.label }}</div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>最近活动</h3>
            </div>
          </template>
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180" />
              <el-table-column prop="name" label="名称" width="180" />
              <el-table-column prop="address" label="地址" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>通知</h3>
            </div>
          </template>
          <div>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp"
                :type="activity.type"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.stat-card {
  height: 100px;
  display: flex;
  align-items: center;
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409EFF;
}

.stat-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.mt-20 {
  margin-top: 20px;
}
</style>
